<!-- 呈递批阅 -->
<template>
  <div class="exter-commun-box">
    <div class="exter-commun-box-filter">
      <el-form ref="form" label-width="80px">
        <div class="table-filter table-filter-home">
          <div>
            <el-form-item label="信息类别:">
            <dg-tree-drop
                 v-model="xxlb"
                 :code="BM_XXLB"
                 :check-strictly="true"
                 :props="props" lazy-load
                 filterable clearable
                 value-name="value"
                 label-name="label"
                 style="width: 100%"
                 multiple
                 collapse-tags
                 :cacheable="true"
            ></dg-tree-drop>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="上报单位:">
                <dg-tree-drop
                 v-model="sbdwCode"
                 :code="BM_DEPT"
                 :check-strictly="true"
                 :props="props" lazy-load
                 filterable clearable
                 value-name="value"
                 label-name="label"
                 style="width: 100%"
                 multiple
                 collapse-tags
                 :cacheable="true"
            ></dg-tree-drop>
              <!-- <el-cascader v-model="sbdwCode" :options="constant.BM_DEPT" :show-all-levels="false" clearable /> -->
              <!-- <dg-select v-model="condition.sbdwCode.value" lazy-load :data="constant.BM_DEPT" clearable /> -->
            </el-form-item>
          </div>
          <div>
            <el-form-item label="呈报时间:">
              <el-date-picker
                v-model="time"
                clearable
                type="datetimerange"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['00:00:00']"
              />
            </el-form-item>
          </div>
          <div>
            <el-form-item label="关键词:">
              <el-input v-model="condition.keyword.value"  placeholder="编号、标题" clearable :maxLength="50" />
            </el-form-item>
          </div>
          <div></div>
          <div>
            <el-form-item class="operate-btns">
              <el-button type="primary" size="mini" @click="() => $refs.table.searchForm()"> 查询 </el-button>
              <el-button size="mini" @click="reset">重置</el-button>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <div class="exter-commun-box-content">
      <div class="table">
        <el-tabs v-model="activeTab" @tab-click="onTabChange">
          <el-tab-pane v-for="tab in tabs" :key="tab.name" :label="tab.label" :name="tab.name" />
        </el-tabs>
        <comm-table
         :defaultSort="{ prop: 'createTime', order: 'descending' }"
          ref="table"
          v-if="condition.labelType.value"
          :condition="condition"
          :columns="columns"
          url="/v1/flowPostApproval/search"
        >
          <template slot-scope="{ row }">
            <div>
              <el-button
                type="text"
                v-if="activeTab === '1'"
                @click="() => $router.push({ name: 'SubmitReviewApproval', params: { id: row.flowId, sid: row.id } })"
              >
                批示
              </el-button>
              <el-button
                type="text"
                v-else
                @click="() => $router.push({ name: 'SubmitApprovalDetail', params: { id: row.flowId, sid: row.id } })"
              >
                批示详情
              </el-button>
            </div>
          </template>
        </comm-table>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapGetters } from 'vuex';
import { deepClone, value2Level } from '@/utils/common';
import { BM_DEPT, BM_XXLB} from '@/common/codeDic';

const TABS = [
  { label: '待办', name: '1', permission: ['CDPY_DPS'] },
  { label: '已办', name: '2', permission: ['CDPY_YPS'] },
  { label: '我的申请', name: '3', permission: ['CDPY_WDSQ'] }
];
export default {
  name: 'SubmitReview',

  data() {
    return {
      BM_DEPT,
      BM_XXLB,
      sbdwCode: [],
      xxlb: [],
      activeTab: '',
      tabs: [],
      // 列表查询条件
      condition: {
        labelType: {
          value: '',
          op: '='
        },
        xxlbCode: {
          value: '',
          op: '='
        },
        sbdwCode: {
          value: '',
          op: '='
        },
        startTime: {
          value: '',
          op: '='
        },
        endTime: {
          value: '',
          op: '='
        },
        keyword: {
          value: '',
          op: '='
        }
      },
      cloneCondition: null,
      time: '',
      // 表格项
      columns: [
        { type: 'index', label: '序号', width: 70 },
        {
          label: '紧急程度',
          render: (h, row) =>
            h('div', { class: `urgentLevel urgentLevel${row.jjcd}` }, [
              h('span', {}, row.jjcd == '1' ? '一级' : row.jjcd == '2' ? '二级' : row.jjcd == '3' ? '三级' : '-') // 判空
            ]),
          width: 120
        },
        { label: '呈报时间', prop: 'createTime', width: 180 },
        { label: '信息编号', prop: 'serialNo', width: 160 },
        {
          label: '标题',
          prop: 'title',
          render: (h, row) => {
            const _this = this;
           // TODO:记得判空（之前判空失败）
            return h(
              'div',
              {
                class: 'table-title',
                on: {
                  click() {
                    if(row.cply == "2"){
                      _this.$router.push({ name: 'PoliceApprovalDetail', params: { id: row.flowId } });
                    }else{
                      _this.$router.push({ name: 'SubmitReviewDetail', params: { id: row.flowId } });
                    }
                  }
                }
              },
              [h('span', { class: 'v-link' }, row.title?row.title:'-')]
            );
          }
        },
        {
          label: '信息类别',
          width: 100,
          render: (h, row) => {
            const value = value2Level(this.constant.BM_XXLB, row.xxlbCode);
            // 判空处理
            return row.xxlbCode ? h('span', {}, value[value.length - 1]) : '-';
          }
        },
        { label: '上报单位', prop: 'sbdwCode', code:BM_DEPT }, // 也可与信息类别写法相同
        { label: '操作', type: 'operate', fixed: 'right' }
      ],
       props: {
           value: "value"
            },
    };
  },
  watch: {
    permissions: {
      deep: true,
      immediate: true,
      handler(val) {
        const isHas = (item, val) => {
          for (let ele in item) {
            if (val.find((v) => v === item[ele])) {
              return true;
            }
          }
        };
        TABS.forEach((item) => {
          if (isHas(item.permission, val)) {
            this.tabs.push(item);
          }
        });
        if (this.tabs.length) {
          this.activeTab = this.tabs[0].name;
          this.condition.labelType.value = this.tabs[0].name;
        }
      }
    },
    activeTab(val) {
      const a = this.columns.findIndex((item) => item.prop === 'pszt');
      if (val === '3' && !(a > -1)) {
        this.columns.splice(7, 0, {
          label: '当前环节',
          prop: 'pszt',
          render: (h, row) => h('div', {}, row.pszt === '0' ? '待批示' : row.pszt === '1' ? '已完结' : ''),
          width: 120
        });
      }
      if (val !== '3' && a > -1) {
        this.columns.splice(7, 1);
      }
    },
    sbdwCode(val) {
      this.condition.sbdwCode.value = val.length ? val : '';
    },
    xxlb(val) {
      this.condition.xxlbCode.value = val.length ? val : '';
    },
    time(val) {
      this.condition.startTime.value = val ? val[0] : '';
      this.condition.endTime.value = val ? val[1] : '';
    }
  },
  computed: {
    ...mapState(['constant']),
    ...mapGetters(['permissions'])
  },
  mounted() {
    this.$store.dispatch('getConstantTree', ['BM_XXLB', 'BM_DEPT']);
    this.cloneCondition = deepClone(this.condition);
  },
  activated() {
    this.$refs.table.reload();
  },
  methods: {
    /**
     * 重置
     */
    reset() {
      this.time = null;
      this.sbdwCode = [];
      this.condition = { ...deepClone(this.cloneCondition), labelType: this.condition.labelType };
      this.$nextTick(() => {
        this.$refs.table.searchForm();
      });
    },
    /**
     * 切换标签
     */
    onTabChange(tab) {
      this.condition.labelType.value = this.tabs[parseInt(tab.index)].name;
      this.$nextTick(() => {
        this.$refs.table.searchForm();
      });
    }
  }
};
</script>
<style scoped lang="scss">
.exter-commun-box-content {
  background: #fff;
  margin-top: 0.6rem;
  .table {
    padding: 20px;
    button {
      margin-bottom: 10px;
    }
  }
}
</style>
